<template>
  <div id="fireHydrant">
    <!-- 运营管理背景 -->
    <div class="title"></div>
    <div class="content">
      <!-- 标题 -->
      <div class="fireHydrantTitle"></div>
      <div class="fireHydrantContent">
        <progressBar :params="params"></progressBar>
      </div>
      <div class="platform">
          <el-row style="margin-bottom:40px">
              <el-col :span="6" style="text-align:center">
                  <img src="../../../../../static/images/safety/1.png" >
                  <span>防火卷帘</span>
              </el-col>
              <el-col :span="6" style="text-align:center">
                  <img src="../../../../../static/images/safety/2.png" >
                  <span>消防栓</span>
              </el-col>
              <el-col :span="6" style="text-align:center">
                  <img src="../../../../../static/images/safety/3.png" >
                  <span>喷淋</span>
              </el-col>
              <el-col :span="6" style="text-align:center">
                  <img src="../../../../../static/images/safety/4.png" >
                  <span>声光报警</span>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="6" style="text-align:center">
                  <div>总数：<span class="yh_green font30">{{fireControlStatus.fhjl.total}}</span></div>
                  <div>故障数：<span class="yh_red font30">{{fireControlStatus.fhjl.fault}}</span></div>
              </el-col>
              <el-col :span="6" style="text-align:center">
                  <div>总数：<span class="yh_green font30">{{fireControlStatus.xfs.total}}</span></div>
                  <div>故障数：<span class="yh_red font30">{{fireControlStatus.xfs.fault}}</span></div>
              </el-col>
              <el-col :span="6" style="text-align:center">
                  <div>总数：<span class="yh_green font30">{{fireControlStatus.pl.total}}</span></div>
                  <div>故障数：<span class="yh_red font30">{{fireControlStatus.pl.fault}}</span></div>
              </el-col>
              <el-col :span="6" style="text-align:center">
                  <div>总数：<span class="yh_green font30">{{fireControlStatus.sgbj.total}}</span></div>
                  <div>故障数：<span class="yh_red font30">{{fireControlStatus.sgbj.fault}}</span></div>
              </el-col>
          </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import progressBar from '../../../common/progressBar.vue'
export default {
  components:{
    progressBar
  },
  data() {
    return {
      fireControlStatus: {
        fhjl: {
          total: 0,
          fault: 0,
        },
        xfs: {
          total: 0,
          fault: 0,
        },
        pl: {
          total: 0,
          fault: 0,
        },
        sgbj: {
          total: 0,
          fault: 0,
        },
      },
      params: {
        leftBottomValue: "报警", //左上文字
        leftTopValue: 136,    //左侧数字
        rightBottomValue: "总数", // 右侧文字
        rightTopValue: 156,   // 右侧数字
        middleTopText: "",  // 中间文字
        middleTopValue:"",     // 中间总数
        leftNumberColor:"#6C45FF", // 左侧数字颜色
        rightNumberColor:"#F6A41", // 右侧数字颜色
        activeColor: "#6C45FF",
      },
    };
  },
  mounted() {
  },
  methods: {
  },
  sockets: {
    sendAqFireControlStatus(data) {
      let aqFireControl = JSON.parse(data);
      this.params.leftTopValue = parseInt(aqFireControl.alarmsNumber);
      this.params.rightTopValue = parseInt(aqFireControl.totalNumber);
      try {
        this.fireControlStatus.fhjl.total = aqFireControl.region[0].total;
        this.fireControlStatus.fhjl.fault = aqFireControl.region[0].fault;
        this.fireControlStatus.xfs.total = aqFireControl.region[1].total;
        this.fireControlStatus.xfs.fault = aqFireControl.region[1].fault;
        this.fireControlStatus.pl.total = aqFireControl.region[2].total;
        this.fireControlStatus.pl.fault = aqFireControl.region[2].fault;
        this.fireControlStatus.sgbj.total = aqFireControl.region[3].total;
        this.fireControlStatus.sgbj.fault = aqFireControl.region[3].fault;
      } catch (e) {}
    },
  },
};
</script>
<style scoped>
.fireHydrantTitle {
  width: 732px;
  height: 64px;
  background: url("../../../../../static/images/safety/fireHydrant.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.fireHydrantContent {
  margin-top: 15px;
  text-align: center;
}
.content {
  margin-top: 25px;
}
.platform{
    margin-top: 40px;
    width: 100%;
  height: 89px;
  background: url("../../../../../static/images/safety/platform.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-bottom: 20px;
}

.font30{
    font-size: 30px;
    font-weight: bolder;
}
</style>
